<template>
  <div class="view">
    <button class="btn-aside btn btn-btn-primary" @click="changeVisual">
      <b>菜单</b>
    </button>
    <div id="map"></div>
    <div id="aside" :style="{ display: isChange ? 'block' : 'none' }">
      <Panel></Panel>
    </div>
  </div>
</template>
<script>
import bus from "../eventBus.js";
import icon from "leaflet/dist/images/marker-icon.png";
import Panel from "./panel.vue";
export default {
  name: "Map",
  data() {
    return {
      map: null,
      isChange: false,
    };
  },
  created() {
    bus.$on("VisibPanel", (val) => {
      this.isChange = val;
    });
  },
  mounted() {
    this.initMap();
    this.sendMap();
  },
  components: {
    Panel,
  },
  methods: {
    initMap() {
      let map = L.map("map", {
        center: [30.185, 102.85],
        minZoom: 6,
        maxZoom: 18,
        zoom: 7,
        crs: L.CRS.EPSG3857,
        maxBounds: [
          [26.05, 97.35],
          [34.32, 108.35],
        ],
        attributionControl: false,
      });
      this.map = map;
      let vecLayer = L.tileLayer(
        "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=55d2c5ec6d14ad2e5e7ce572a724db86",
        { noWrap: true, zoomOffset: 0 }
      );
      let cavLayer = L.tileLayer(
        "http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=55d2c5ec6d14ad2e5e7ce572a724db86",
        { noWrap: true, zoomOffset: 0 }
      );
      let imgLayer = L.tileLayer(
        "http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=55d2c5ec6d14ad2e5e7ce572a724db86",
        { noWrap: true }
      );
      let ciaLayer = L.tileLayer(
        "http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=55d2c5ec6d14ad2e5e7ce572a724db86",
        { noWrap: true }
      );
      //创建天地图矢量图层组
      let vecLayerGroup = L.layerGroup([vecLayer, cavLayer]);
      //创建天地图影像图层组
      let imgLayerGroup = L.layerGroup([imgLayer, ciaLayer]);
      //创建图层组
      let baseLayers = {
        天地图矢量: vecLayerGroup,
        天地图影像: imgLayerGroup,
      };
      let overlays = {};
      //初始时加载天地图矢量图层组
      map.addLayer(vecLayerGroup);
      //加载图层管理控件
      L.control
        .layers(baseLayers, overlays, {
          collapsed: false,
          position: "bottomleft",
        })
        .addTo(map);
      const DefaultIcon = L.icon({
        iconUrl: icon,
      });
      L.Marker.prototype.options.icon = DefaultIcon;
    },
    changeVisual() {
      this.isChange = this.isChange ? false : true;
    },
    getShengjie() {
      const map = this.map;
      this.$axios.get("/Geojson/省边界4326.json").then((res) => {
        console.log(res);
        let shengjie = res.data;
        console.log(shengjie);
        L.geoJSON(shengjie, {
          style: function (feature) {
            return { color: "red" };
          },
        }).addTo(map);
      });
    },
    sendMap() {
      bus.$emit("sharemap", this.map);
    },
  },
};
</script>
<style scoped>
.view {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
}
.btn-aside {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: rgb(222, 220, 216);
}
#aside {
  width: 20%;
  height: 85%;
  position: fixed;
  background: rgb(222, 220, 216);
  top: 10%;
  right: 30px;
}
</style>
